---

AULA06 - DOM

---

AGENDA

• DOM
• Selecionando elementos do DOM
• Carregamento do DOM e recursos
• Referências
• Perguntas

1. Árvore DOM

• Consulte DOM.

Fonte: Disponível em: https://www.alura.com.br/artigos/o-que-e-o-dom
Acesso em: 09 mar. 2023

1.1. Selecionando itens do DOM

• Consulte Javascript.info.

• Podemos selelcionar elementos do DOM de diversas maneiras:

Utilizando getElement*

<div id="a1">
  <div id="a1-conteudo">Elemento</div>
</div>
<script>

// selecionando o elemento
        let elem = document.getElementById('a1');
    // modificando a cor do background
        elem.style.background = 'red';
    // modificando a cor do fonte
        elem.style.color = 'white';
    // atribuindo conteúdo 
        elem.textContent = "Ana";

</script>

1. Acessando diretamente o id. Porém, pode causar erro, caso exista variáveis com o mesmo nome que o id.

a1.style.background = "red";
a1.textContent = "Ana";
a1.style.color = "white";

Utilizando querySelector*

<ul>
  <li>1.Primeiro</li>
  <li>2.Segundo (último)</li>
</ul>
<ul>
  <li>3.Primeiro</li>
  <li>4.Segundo (último)</li>
</ul>
<script>

• Exibe no alerta, os últimos filhos li das listas desordenadas ul.

let elements = document.querySelectorAll('ul > li:last-child');

  for (let elem of elements) {
    alert(elem.innerHTML); // "2.Segundo (último)", "4.Segundo (último)"
  }

</script>

Utilizando matches

<a href="http://example.com/file.zip">...</a>
<a href="http://ya.ru">...</a>

<script>

// can be any collection instead of document.body.children
  for (let elem of document.body.children) {
    if (elem.matches('a[href$="zip"]')) {
      alert("The archive reference: " + elem.href );
    }
  }

</script>

---

1.2. Carregamento do DOM e recursos

1.2.1. Ciclo de vida

• O ciclo de vida do carregamento de uma página, consiste em 3 eventos importantes:
  • DOMContentLoaded: onde o navegador carrega totalmente o HTML, e a árvore DOM é constituída, porém recursos externos como imagens, estilos ainda não podem ser carregados.
  • load: além do carregamento do HTML, os recursos externos são carregados: imagens, estilos etc.
  • beforeunload/unload: o usuário está saindo da página:
    • beforeunload: podemos verificar se o usuário salvou as alterações e perguntar se realmente deseja sair.
    • unload: o usuário quase saiu, mas ainda podemos iniciar algumas operações, como o envio de estatísticas.

1.2.2. Evento window.onload

• O evento load no objeto window é acionado quando a página inteira é carregada, incluindo estilos, imagens e outros recursos. Este evento está disponível através da propriedade onload.
• Exemplo copiado do site [Javascript.info]:

<script>
  window.onload = function() { // same as window.addEventListener('load', (event) => {
    alert('Page loaded');

    // image is loaded at this time
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  };
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

1.2.3. Evento window.onunload

• O evento unload no objeto window é acionado quando usuário sai da página.

1.2.4. Outros eventos

• Javascript.info - Diversos.

---

Referências

• Esta aula foi elaborada a partir do conteúdo disponibilizado em cada um dos links indicados no próprio texto.
• Javascript.info.

---

---

ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.

</div> </div>